<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user'
import type { MsgItem } from '@/types/room'
import dayjs from 'dayjs'

const store = useUserStore()

const props = defineProps<{
  info: MsgItem
  type: number
}>()

// console.log(props.info, props.type)
</script>

<template>
  <!-- 文字/图片消息 -->
  <!-- 
   登录时存储的用户id 如果是等于 发送人的id, 
   那么这条消息就是用户发送的, 
   否则就是医生发送 
   -->
  <view class="message-item" :class="{ reverse: store.userId === info.from }">
    <image class="room-avatar" src="/static/uploads/doctor-avatar-2.png" />
    <view class="room-message">
      <view class="time">{{ dayjs(info.createTime).format('hh:mm') }}</view>
      <view class="text" v-if="type === 1">
        {{ info.msg?.content }}
      </view>
      <image v-if="type === 4" class="image" :src="info.msg?.picture?.url" mode="widthFix" />
    </view>
  </view>
</template>

<style lang="scss">
.message-item {
  display: flex;
  align-self: flex-start;
  margin-top: 60rpx;

  .room-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .room-message {
    margin-left: 20rpx;
  }

  .time {
    font-size: 26rpx;
    color: #979797;
  }

  .image {
    max-width: 420rpx;
    margin-top: 10rpx;
  }

  .text {
    max-width: 420rpx;
    line-height: 1.75;
    padding: 30rpx 40rpx;
    margin-top: 16rpx;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #3c3e42;
    background-color: #fff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -25rpx;
      width: 26rpx;
      height: 52rpx;
      background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
      background-size: contain;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
    align-self: flex-end;

    .room-message {
      margin-left: 0;
      margin-right: 20rpx;
    }

    .time {
      text-align: right;
    }

    .text {
      background-color: #16c2a3;
      color: #fff;

      &::after {
        left: auto;
        right: -25rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
      }
    }
  }
}
</style>